<!-- 团队详情 -->
<template>
  <div class="app-container bgf5" style="min-height: calc(100vh - 84px)">
    <el-card>
      <div class="disFlxJS">
        <div class="disFlx">
          <image-preview :src="info.teamImg" :width="88" :height="88" />
          <div class="pl-15">
            <div>
              <span class="fw-7">{{ info.teamName }}</span>
              <span class="pl-10">(团队码：{{ info.teamCode }})</span>
              <el-button type="success" plain size="mini" class="ml-20" @click="editTeam">编辑</el-button>
            </div>
            <div class="pt-5 fz-15">{{ info.companyName }}</div>
            <div class="color6 pt-2 fz-14">
              <span>团队负责人：</span>
              <span>{{ info.leaderName || "" }}</span>
            </div>
            <div class="color6 pt-2 fz-14">
              <span>创建时间：</span>
              <span>{{ info.createTime || "" }}</span>
            </div>
          </div>
        </div>
        <div class="tc cup" @click="imageOpen = true">
          <img :src="info.qrCode" style="width:55px;height:55px;">
          <div class="fz-14 color6 pt-5">团队签约码</div>
        </div>
      </div>
    </el-card>
    <el-card class="mt-20" :body-style="{ padding: '0 20px 20px 20px' }">
      <el-tabs v-model="queryParams.userType">
        <el-tab-pane :label="`已签约用户(${info.userNum || 0})`" name="1">
          <el-table :data="tableList">
            <el-table-column label="用户姓名" prop="userName" align="center" />
            <el-table-column label="性别" prop="sex" width="100" align="center">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.sys_user_sex"
                  :value="scope.row.sex"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="年龄"
              prop="dname"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                {{ calculate(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column
              label="电话"
              prop="mobile"
              align="center"
              width="150"
            />
            <el-table-column label="签约时间" prop="joinTime" align="center" />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
        <el-tab-pane :label="`团队成员(${info.expertNum || 0})`" name="0">
          <el-row :gutter="10" class="mb-8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="openSelectExpert"
                >新增成员</el-button
              >
              <el-button
                type="success"
                plain
                icon="el-icon-edit-outline"
                size="mini"
                :disabled="!ids.length || ids.length > 1"
                @click="setLeader"
                >设为负责人</el-button
              >
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="!ids.length"
                @click="batchRemove"
                >批量移除成员</el-button
              >
            </el-col>
          </el-row>
          <el-table :data="tableList" @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55"
              align="center"
              fixed="left"
            />
            <el-table-column
              label="团队成员"
              prop="userName"
              width="120"
              align="center"
            />
            <el-table-column
              label="团队身份"
              prop="isLeader"
              width="120"
              align="center"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.team_leader"
                  :value="String(scope.row.isLeader)"
                />
              </template>
            </el-table-column>
            <el-table-column label="性别" prop="sex" width="100" align="center">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.sys_user_sex"
                  :value="scope.row.sex"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="职称"
              prop="postName"
              width="120"
              align="center"
            />
            <el-table-column label="部门" prop="deptname" align="center" />
            <el-table-column label="单位" prop="com" align="center" />
            <el-table-column
              label="加入时间"
              prop="joinTime"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.joinTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <SelectExpertDialog ref="SelectExpertDialog" @select="changeSelectExpert" />

    <EditGroups ref="EditGroups" @refresh="getDetail" />

    <el-dialog :visible.sync="imageOpen" width="400px" title="请使用微信扫码进行团队签约">
      <div class="tc">
        <img :src="info.qrCode" style="width: 300px; height: 300px;" />
        <el-button type="primary" class="mt-20" @click="saveImg" >下载用户签约码</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getTeamDetail,
  teamRoleList,
  teamAddBatch,
  teamSetLeader,
  teamRemovebatch,
} from "@/api/company/groups";
import { birthdayToAge } from "@/utils/ruoyi";
import { deepClone } from '@/utils';
import SelectExpertDialog from "@/views/expert/expert/selectExpertDialog";
import EditGroups from './editGroups';

export default {
  name: "GroupsDetails",
  dicts: ["sys_user_sex", "team_leader"],
  components: {
    SelectExpertDialog,
    EditGroups
  },
  data() {
    return {
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userType: "0", // 用户类型： 0专家 1用户
        teamId: "",
      },
      info: {},
      tableList: [],
      imageOpen: false,
    };
  },
  created() {
    this.queryParams.teamId = this.$route.params.teamId;
    this.getDetail();
    this.getList();
  },
  watch: {
    "queryParams.userType"(nval) {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
  methods: {
    // 获取团队详情
    getDetail() {
      getTeamDetail(this.queryParams.teamId).then((res) => {
        this.info = res.data;
      });
    },
    /** 查询专家 || 用户列表 */
    getList() {
      teamRoleList(this.queryParams).then((res) => {
        this.tableList = res.rows;
        this.total = res.total;
      });
    },
    // 计算显示年龄
    calculate(item) {
      if (!item.birthday) return;
      const ages = birthdayToAge(item.birthday);
      return `${ages[0]}岁`;
    },
    // 打开选择专家弹窗
    openSelectExpert() {
      this.$refs.SelectExpertDialog.openDialog({
        title: "新增团队成员",
        confirmText: "确认新增",
        filterUserIds: this.info.expertList,
      });
    },
    changeSelectExpert(userIds) {
      let params = {
        teamId: this.queryParams.teamId,
        memberList: [],
      };
      userIds.forEach((v) => {
        params.memberList.push({
          userId: v,
          userType: this.queryParams.userType,
          isLeader: 0,
        });
      });

      teamAddBatch(params).then((res) => {
        this.getDetail();
        this.queryParams.pageNum = 1;
        this.getList();
        this.$message.success("新增成功");
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.memberId);
    },
    // 设为负责人
    setLeader() {
      teamSetLeader({
        memberId: this.ids[0],
        teamId: this.queryParams.teamId,
        isLeader: 1,
      }).then(() => {
        this.getDetail();
        this.getList();
        this.$message.success("负责人设置成功");
      });
    },
    // 批量移除
    batchRemove() {
      let params = {
        teamId: this.queryParams.teamId,
        memberList: this.ids.map((v) => {
          return {
            memberId: v,
          };
        }),
      };

      this.$modal
        .confirm('是否确认移除勾选的团队成员？')
        .then(function () {
          return teamRemovebatch(params);
        })
        .then(() => {
          this.getDetail();
          this.queryParams.pageNum = 1;
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    editTeam() {
      this.$refs.EditGroups.openDialog(deepClone(this.info));
    },
    // base64 保存图片
    saveImg() {
      var base64 = this.info.qrCode.toString();
      var byteCharacters = atob(
        base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
      );
      var byteNumbers = new Array(byteCharacters.length);
      for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      var blob = new Blob([byteArray], {
        type: undefined,
      });
      var aLink = document.createElement("a");
      aLink.download = `${this.info.teamName}_签约码.jpg`; //这里写保存时的图片名称
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
  },
};
</script>

<style lang="scss" scoped></style>
